import React from "react";
import ReactEcharts from "echarts-for-react";

const ShowLineEcharts = (props) => {
  const ChartData = props.LineCharts
  
  const ToCreateXAxis = () => {
    let TemplateArray = []
    ChartData.data.map(item => {
      return TemplateArray = [...TemplateArray,item.NumberDate]
    })
    return TemplateArray
  }
  const ToCreateSeries = () => {
    let TemplateArray = []
    ChartData.data.map(item => {
      return TemplateArray = [...TemplateArray,item.Num]
    })
    return TemplateArray
  }

  let LineOption = {
    title: {
      text: ChartData.title
    },
    xAxis: {
      data: ToCreateXAxis()
    },
    yAxis: {},
    series: [
      {
        data:ToCreateSeries(),
        type: 'line',
        areaStyle: {
          opacity: 0.3,
          color:'#349dff'
        }
      },
      // {
      //   data: [25, 14, 23, 35, 10],
      //   type: 'line',
      //   areaStyle: {
      //     color: '#ff0',
      //     opacity: 0.5
      //   }
      // }
    ]
  };
  return (
    <ReactEcharts
      style={{ width:"100%",minHeight: "400px" }}
      option={LineOption}
      theme={"theme_name"}
    ></ReactEcharts>
  )
}

export default ShowLineEcharts